<template>
  <section class="pageMain">
    <img class="headImg" :src="imgss[0].image" alt="">
    <div class="title">
      <img class="titleBack" src="@/assets/titleBack.png" alt="">
      <div class="mainTitle">CLASSIFICATION</div>
      <div class="subTitle">{{ $t('pl.p1') }}</div>
    </div>
    <!--    列表-->
    <div class="pClass">
      <div class="item" v-for="item in prclass">
        <img :src="item.big_image" alt="" object-fit="fill">
        <div class="pTitle" style="cursor: pointer" @click="pclassClick(item)">{{ item.name }}</div>
        <div class="pList" v-if="item.child && item.child.length > 0">
          <div class="pListItem" v-for="items in item.child">
            <div class="pSubTitle" style="cursor: pointer" @click="pclassClick(items)">{{ items.name }}</div>
            <div class="threeClass" v-if="items.child && items.child.length > 0">
              <div v-for="itemss in items.child" style="cursor: pointer" @click="pclassClick(itemss)">{{itemss.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</template>

<script>
import {getNavListThere} from "@/api/home";

export default {
  name: "productClass",
  data: () => ({
    arr:[1,2,3,4],
    pclass:[],
    banner:'',
    baseUrl: window.location.origin
  }),
  created() {
    console.log(window.location.origin)
  },
  computed:{
    imgss(){
      return this.$store.state.storeThereNavList.filter(item => item.mid == 6)
    },
    prclass(){
      return this.$store.state.storeThereNavList.filter(item => item.mid == 6)[0].child
    }
  },
  methods:{
    pclassClick(item){
      this.$router.push({
        name: 'productList',
        query: {
          id: item.id,
          name: item.name
        }
      },() => {})
    }
  }
}
</script>


<style scoped lang="less">
.pageMain {

  .headImg {
    width: 100%;
    height: 300px;
  }

  .title {
    padding: 60px;
    box-sizing: content-box;
    position: relative;
    text-align: center;
    height: 126px;
    .titleBack {
      position: absolute;
      left: calc((100% - 30px) / 2);
      width: 30px;
      height: 127px;
    }

    .mainTitle {
      font-weight: 800;
      font-size: 36px;
      color: #333333;
      margin-top: 25px;
    }

    .subTitle {
      color: #00A3E6;
      font-size: 18px;
    }
  }

  .pClass {
    margin: 0 auto;
    width: 1200px;

    .item {
      display: inline-block;
      width: 560px;
      margin-right: 80px;
      margin-bottom: 50px;
      vertical-align: top;
      img {
        width: 100%;
        height: 270px;
      }

      .pTitle {
        margin: 20px 0;
        font-size: 26px;
      }

      .pList {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .pListItem {
          display: inline-block;
          width: 50%;
          margin-bottom: 20px;
          .pSubTitle {
            color: #666666;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 15px;
          }
          .threeClass {
            border-left: 1px solid #D8D8D8;
            margin-left: 16px;
            padding: 5px 0 5px 10px;
            div{
              color: #666666;
              font-size: 16px;
              font-weight: 400;
              margin-top: 20px;
            }
            div:nth-child(1){
              margin-top: 0;
            }
            div:hover{
              color: #00A3E6;
              cursor: pointer;
            }
          }
        }
      }
    }

    .item:nth-child(2n) {
      margin-right: 0;
    }
  }
}

</style>